<script setup>
import DetailHot from './components/DetailHot.vue'
import LayoutNav from '../Layout/components/LayoutNav.vue'
import LayoutFooter from '../Layout/components/LayoutFooter.vue'
import { getDetail } from '@/apis/detail'
import { onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { useCartStore } from '@/stores/cartStore'
import { useshopProduct } from '@/stores/shopProduct'
import { insertCartAPI } from '@/apis/cart.js'
import { getAddrListAPI } from '@/apis/user.js'
import CarButton from '@/components/CartButton/index.vue'
import EvaluationAlert from './components/EvaluationAlert.vue'
const shopProduct = useshopProduct()
const cartStore = useCartStore()
const goods = ref({})
const route = useRoute()
const router = useRouter()

//获取商品详情
const getProdInfo = async () => {
	let res = await shopProduct.getProdInfo(route.params.spuId)
	let { data } = res
	// console.log(data);
	shopMoreInfo.value = data
}
const getUaerAddrListAPI = async () => {
	let res = await getAddrListAPI()
	// console.log(res)
	addrList.value = res.data
}
onMounted(() => {
	getProdInfo()
	getUaerAddrListAPI()
})

//商品详细信息
let shopMoreInfo = ref({})

//当前选择规格
let activeShopSku = ref(0)

// sku规格被操作时
let skuObj = {}
//用户收货地址
let addrList = ref([])

// count
const count = ref(1)
const countChange = (num) => {
	count.value += num
	if (count.value < 1) {
		count.value = 1
	}
}

//控制图片弹框
let isShowImageAlert = ref(false)

//更多评论弹框
let isEvaluationAlert = ref(false)

//关闭评论弹框
const closeEvaluationAlert = () => {
	isEvaluationAlert.value = false
}

// 添加购物车
const addCar = async () => {
	let formData = {
		count: count.value,
		oldSkuid: '',
		spuId: shopMoreInfo.value.spuId,
		skuId: shopMoreInfo.value.skus[activeShopSku.value].skuId
	}
	let res = await insertCartAPI(formData)
	ElMessage({
		type: 'success',
		message: '添加成功'
	})
}

// 点击立即购买
const handlebuyNow = () => {
	router.push({
		path: '/checkout',
		query: {
			count: count.value,
			shopId: shopMoreInfo.value.shopId,
			skuId: shopMoreInfo.value.skus[activeShopSku.value].skuId,
			spuId: shopMoreInfo.value.spuId
		}
	})
}
</script>

<template>
	<div class="detail-mainBox">
		<EvaluationAlert v-if="isEvaluationAlert" :closeEvaluationAlert="closeEvaluationAlert" :spuEvaluationData="shopMoreInfo.spuEvaluationVO" />
		<div class="detail-skuMainInfo">
			<div class="skuMainInfo-skuImage" @click="isShowImageAlert = true">
				<img :src="shopMoreInfo.mainImgUrl" alt="" />
			</div>
			<div class="skuMainInfo-skuInfo">
				<p class="skuInfo-skuName">{{ shopMoreInfo.name }}</p>
				<div class="skuInfo-skuTagList">
					<div class="tagList-item">促销特惠</div>
				</div>
				<div class="skuInfo-purchaseInfo">
					<div class="purchaseInfo-price">
						<div class="purchaseInfo-newPrice">￥{{ (shopMoreInfo.priceFee / 100).toFixed(2) }}</div>
						<div class="purchaseInfo-oldPrice">￥{{ (shopMoreInfo.marketPriceFee / 100).toFixed(2) }}</div>
					</div>
					<div class="skuInfo-numberInfo">
						<div class="numberInfo-numberConfigBox">
							<div class="numberInfo-reduceButton" @click="countChange(-1)">-</div>
							<div class="numberInfo-number">
								{{ count }}
							</div>
							<div class="numberInfo-addButton" @click="countChange(1)">+</div>
						</div>
						<div class="centerLine"></div>
						<div class="numberInfo-title">数量</div>
					</div>
				</div>
				<div class="skuInfo-addressInfo">
					<div class="addressInfo-title">收货地址</div>
					<div class="classification-textarea">
						<div class="address-textarea">
							<p v-if="addrList[0]">{{ addrList[0].province }}-{{ addrList[0].city }}-{{ addrList[0].area }}</p>
							<p v-if="addrList[0]">{{ addrList[0].addr }}</p>
							<p v-else>暂无任何收货地址</p>
						</div>
						<div class="addressTextarea-configbutton">
							<div class="configButton-item">
								<img src="@/assets/images/detail-images/Group_3549@2x.png" alt="" />
							</div>
							<div class="configButton-item">
								<img src="@/assets/images/detail-images/Group_3547@2x.png" alt="" />
							</div>
						</div>
					</div>
				</div>
				<div class="skuInfo-specificationsSelect">
					<div class="specificationsSelect-title">商品规格</div>
					<div class="specificationsSelect-list">
						<div
							:class="activeShopSku === index ? 'specificationsSelectList-item active' : 'specificationsSelectList-item'"
							v-for="(item, index) in shopMoreInfo.skus"
							:key="index"
							@click="activeShopSku = index"
						>
							{{ item.skuName }}
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="skuInfo-purchaseButtonBox">
			<div class="purchaseButtonBox-addCarButton" @click="addCar">加入购物车</div>
			<div class="purchaseButtonBox-purchaseCarButton" @click="handlebuyNow">立即购买</div>
		</div>
		<div class="skuInfo-commentBox">
			<div class="commentBox-moreComment">
				<div class="comment-title">商品评价/5.0</div>
				<div class="comment-allNumbeer">
					（{{ shopMoreInfo.spuEvaluationVO ? (Array.isArray(shopMoreInfo.spuEvaluationVO) ? shopMoreInfo.spuEvaluationVO.length : 1) : 0 }}评论）
				</div>
				<div class="comment-showMoreButton">
					<div class="showMoreButton-button" v-if="shopMoreInfo.spuEvaluationVO" @click="isEvaluationAlert = true">查看更多</div>
				</div>
			</div>
			<div class="commentBox-mainComment" v-for="(item, index) in 1" :key="index" v-if="shopMoreInfo.spuEvaluationVO">
				<div class="commentBox-userInfo">
					<div class="userInfo-image">
						<img :src="shopMoreInfo.spuEvaluationVO.userPic" alt="" />
					</div>
					<div class="userInfo-name">{{ shopMoreInfo.spuEvaluationVO.userNickName }}</div>
					<div class="userInfo-line"></div>
					<div class="userInfo-commentDate">{{ shopMoreInfo.spuEvaluationVO.updateTime }}</div>
				</div>
				<div class="comment-score">
					<div class="score-icon" v-for="(item, index) in 5" :key="index">
						<img src="@/assets/images/detail-images/star@2x.png" alt="" />
					</div>
					<div class="enScore-icon">
						<img src="@/assets/images/detail-images/enstar@2x.png" alt="" />
					</div>
				</div>
				<div class="comment-mainText">
					{{ shopMoreInfo.spuEvaluationVO.content }}
				</div>
				<div class="comment-mainimages" v-if="JSON.parse(shopMoreInfo.spuEvaluationVO.picJson).length > 0">
					<div class="mainimages-item" v-for="(items, indexs) in shopMoreInfo.spuEvaluationVO.picJson" :key="indexs">
						<img :src="items" alt="" />
					</div>
				</div>
			</div>
			<div class="commentBox-noComment" v-if="!shopMoreInfo.spuEvaluationVO">此商品暂无评论</div>
		</div>
		<div class="detail-imagesAlert" v-if="isShowImageAlert" @click.self.stop="isShowImageAlert = false">
			<div class="imagesAlert-imageBox">
				<div class="imagesAlert-mainImage">
					<img :src="shopMoreInfo.imgUrls" alt="" />
					<div class="imagesAlert-closeButton" @click="isShowImageAlert = false">
						<img src="@/assets/images/home-Images/Group 28@2x.png" alt="" />
					</div>
					<div class="imagesAlert-shareButton">ICON</div>
				</div>
				<div class="imagesAlert-imagesList">
					<div class="imagesList-item" v-for="(item, index) in 1">
						<img :src="shopMoreInfo.imgUrls" alt="" />
					</div>
				</div>
			</div>
		</div>
		<CarButton />
	</div>
	<LayoutFooter />
</template>


<style scoped lang='scss'>
.detail-mainBox {
	width: 100%;
	box-sizing: border-box;
	padding: 67px 0 0;
	.detail-skuMainInfo {
		max-width: 1600px;
		margin: 0 auto;
		height: 800px;
		display: flex;
		justify-content: space-between;
		margin-bottom: 40px;
		.skuMainInfo-skuImage {
			width: 800px;
			height: 800px;
			cursor: zoom-in;
			img {
				width: 100%;
				height: auto;
			}
		}
		.skuMainInfo-skuInfo {
			flex: 1;
			padding: 0 60px 0 85px;
			.skuInfo-skuName {
				width: 100%;
				font-weight: bold;
				font-size: 32px;
				color: #333333;
				margin-bottom: 40px;
			}
			.skuInfo-skuTagList {
				width: 100%;
				display: flex;
				.tagList-item {
					background: rgba(195, 13, 35, 0.1);
					border-radius: 3px 3px 3px 3px;
					padding: 11px;
					font-weight: bold;
					font-size: 19px;
					color: #c30d23;
				}
			}
			.skuInfo-purchaseInfo {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 28px;
				.purchaseInfo-price {
					display: flex;
					align-items: end;
					.purchaseInfo-newPrice {
						font-weight: bold;
						font-size: 32px;
						color: #c30d23;
						margin-right: 23px;
					}
					.purchaseInfo-oldPrice {
						font-weight: 400;
						font-size: 24px;
						color: #999999;
						text-decoration-line: line-through;
					}
				}
				.skuInfo-numberInfo {
					width: 283px;
					height: 63px;
					border-radius: 13px 13px 13px 13px;
					border: 1px solid #f4f4f4;
					display: flex;
					align-items: center;
					padding: 8px 21px;
					.numberInfo-numberConfigBox {
						display: flex;
						div {
							width: 48px;
							height: 48px;
							display: flex;
							justify-content: center;
							align-items: center;
							font-size: 30px;
							cursor: pointer;
							&.numberInfo-number {
								background: #f4f4f4;
								border-radius: 5px 5px 5px 5px;
								border: 1px solid #f4f4f4;
								font-size: 16px;
								cursor: auto;
							}
						}
					}
					.centerLine {
						border: 1px solid #f4f4f4;
						margin: 0 27px;
						height: 27px;
					}
					.numberInfo-title {
						font-weight: bold;
						font-size: 16px;
						color: #c30d23;
						line-height: 24px;
					}
				}
			}
			.skuInfo-addressInfo {
				margin-bottom: 40px;
				.addressInfo-title {
					font-weight: bold;
					font-size: 21px;
					color: #333333;
					line-height: 32px;
					margin-bottom: 13px;
				}
				.classification-textarea {
					box-sizing: border-box;
					padding: 13px;
					width: 100%;
					height: 100%;
					border-radius: 0px 0px 0px 0px;
					border: 3px solid #f4f4f4;
					display: flex;
					justify-content: space-between;
					height: 144px;
					::-webkit-scrollbar {
						display: none;
					}
					.address-textarea {
						width: 529px;
						font-size: 21px;
						color: rgba(102, 102, 102, 1);
						overflow: auto;
					}
					.addressTextarea-configbutton {
						height: 144px;
						width: 24px;
						.configButton-item {
							width: 24px;
							height: 24px;
							border-radius: 0px 0px 0px 0px;
							/* border: 2px solid #9c9c9c; */
							margin-bottom: 13px;
							border-radius: 1px;
							img {
								width: 100%;
								height: 100%;
							}
						}
					}
				}
			}
			.skuInfo-specificationsSelect {
				.specificationsSelect-title {
					font-weight: bold;
					font-size: 21px;
					color: #333333;
					margin-bottom: 13px;
				}
				.specificationsSelect-list {
					width: 100%;
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					.specificationsSelectList-item {
						width: 320px;
						height: 43px;
						background: #f4f4f4;
						border-radius: 5px 5px 5px 5px;
						border: 1px solid #f4f4f4;
						margin-bottom: 13px;
						font-weight: bold;
						font-size: 16px;
						color: rgba(26, 30, 38, 1);
						display: flex;
						justify-content: center;
						align-items: center;
						cursor: pointer;
						&.active {
							background: rgba(195, 13, 35, 0.1);
							border-radius: 5px 5px 5px 5px;
							border: 1px solid #c30d23;
							color: rgba(195, 13, 35, 1);
						}
					}
				}
			}
		}
	}
	.skuInfo-purchaseButtonBox {
		max-width: 1600px;
		margin: 0 auto;
		height: 113px;
		margin-bottom: 67px;
		display: flex;
		div {
			width: 800px;
			display: flex;
			justify-content: center;
			align-items: center;
			font-weight: 500;
			font-size: 32px;
			color: #ffffff;
		}
		.purchaseButtonBox-addCarButton {
			background: #d2a36c;
			border-radius: 0px 0px 0px 0px;
			cursor: pointer;
		}
		.purchaseButtonBox-purchaseCarButton {
			background: #c30d23;
			border-radius: 0px 0px 0px 0px;
			cursor: pointer;
		}
	}
	.skuInfo-commentBox {
		max-width: 1600px;
		margin: 0 auto;
		padding: 36px 32px 32px;
		border-radius: 5px 5px 5px 5px;
		border: 1px solid #f4f4f4;
		margin-bottom: 67px;
		.commentBox-moreComment {
			width: 100%;
			border-bottom: 1px solid #f4f4f4;
			display: flex;
			align-items: center;
			margin-bottom: 32px;
			.comment-title {
				font-weight: bold;
				font-size: 19px;
				color: #000000;
				margin-right: 19px;
			}
			.comment-allNumbeer {
				font-weight: 400;
				font-size: 19px;
				color: #333333;
			}
			.comment-showMoreButton {
				flex: 1;
				display: flex;
				justify-content: end;
				margin-bottom: 27px;
				.showMoreButton-button {
					width: 139px;
					height: 53px;
					background: #f4f4f4;
					border-radius: 133px 133px 133px 133px;
					border: 1px solid #f3fbf4;
					display: flex;
					justify-content: center;
					align-items: center;
					font-weight: bold;
					font-size: 19px;
					color: #333333;
				}
			}
		}
		.commentBox-mainComment {
			margin-bottom: 20px;
			.commentBox-userInfo {
				display: flex;
				align-items: center;
				border-bottom: 1px solid #f4f4f4;
				margin-bottom: 21px;
				.userInfo-image {
					width: 48px;
					height: 48px;
					border-radius: 50%;
					overflow: hidden;
					margin-right: 21px;
				}
				.userInfo-name {
					font-weight: 400;
					font-size: 21px;
					color: #1a1e26;
				}
				.userInfo-line {
					width: 0px;
					height: 21px;
					border: 1px solid #f4f4f4;
					margin: 0 21px;
				}
				.userInfo-commentDate {
					font-weight: 300;
					font-size: 19px;
					color: #9d9ea2;
				}
			}
			.comment-score {
				display: flex;
				margin-bottom: 21px;
				.score-icon {
					width: 21px;
					height: 21px;
					margin-right: 5px;
				}
				.enScore-icon {
					width: 21px;
					height: 21px;
					margin-right: 5px;
				}
			}
			.comment-mainText {
				width: 100%;
				border-radius: 5px 5px 5px 5px;
				border: 1px solid #f4f4f4;
				width: 1536px;
				font-weight: 400;
				font-size: 21px;
				color: #1a1e26;
				margin-bottom: 21px;
				padding: 10px 10px;
			}
			.comment-mainimages {
				display: flex;
				.mainimages-item {
					width: 171px;
					height: 171px;
					border-radius: 7px;
					margin-right: 13px;
					overflow: hidden;
				}
			}
		}
	}
	.detail-imagesAlert {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.6);
		display: flex;
		justify-content: center;
		align-items: center;
		.imagesAlert-imageBox {
			display: flex;
			align-items: center;
			flex-direction: row;
			.imagesAlert-mainImage {
				position: fixed;
				top: 48px;
				left: 466px;
				right: 466px;
				bottom: 192px;
				background-color: rgba(242, 246, 244, 1);
				border-radius: 32px 32px 32px 32px;
				border: 1px solid #f4f4f4;
				display: flex;
				justify-content: center;
				overflow: hidden;
				& > image {
					height: 100%;
					width: auto;
				}
				.imagesAlert-closeButton {
					width: 51px;
					height: 51px;
					position: absolute;
					right: 13px;
					top: 13px;
				}
				.imagesAlert-shareButton {
					width: 53px;
					height: 53px;
					background: rgba(255, 255, 255, 1);
					box-shadow: 0px 13 27px 0px rgba(0, 0, 0, 0.04);
					border-radius: 50%;
					position: absolute;
					bottom: 32px;
					right: 32px;
					line-height: 53px;
					text-align: center;
				}
			}
			.imagesAlert-imagesList {
				height: 85px;
				position: fixed;
				left: 466px;
				right: 466px;
				bottom: 75px;
				display: flex;
				justify-content: center;
				.imagesList-item {
					width: 85px;
					height: 85px;
					border-radius: 8px;
					overflow: hidden;
					background-color: #ffffff;
					margin: 10.5px;
					display: flex;
					align-items: center;
					justify-content: center;
					img {
						width: 100%;
						height: auto;
					}
				}
			}
		}
	}
	.carList-button {
		cursor: pointer;
		width: 65px;
		height: 65px;
		background: #c30d23;
		border-radius: 0px 0px 0px 0px;
		position: fixed;
		top: calc((100% - 500px) / 2);
		right: 0;
		line-height: 65px;
		text-align: center;
		color: #ffffff;
		z-index: 999;
	}
}
</style>